import { Form, Input, Button, Toast } from 'antd-mobile';
import React, { useCallback } from 'react';
import { connect, history } from 'umi';
import styles from './index.less';
import pic from '@/assets/yay.jpg';

const Login = ({ dispatch }) => {
  const onFinish = useCallback(async (values) => {
    const { success } = await dispatch({
      type: 'global/login',
      payload: values,
    });
    if (success) {
      Toast.show({
        icon: 'success',
        content: '登录成功！',
      });
      history.push('/main/home');
    }
  }, []);

  return (
    <div className={styles.body}>
      <div className={styles.box}>
        <img src={pic} />
        <Form
          layout="horizontal"
          footer={
            <Button block type="submit" color="primary" size="large">
              提交
            </Button>
          }
          onFinish={onFinish}
        >
          <Form.Item
            name="name"
            label="姓名"
            rules={[{ required: true, message: '姓名不能为空' }]}
          >
            <Input placeholder="请输入姓名" />
          </Form.Item>
          <Form.Item
            name="pwd"
            label="密码"
            rules={[{ required: true, message: '密码不能为空' }]}
          >
            <Input placeholder="请输入密码" />
          </Form.Item>
        </Form>
      </div>
    </div>
  );
};

export default connect()(Login);
